<template>
    <div class="app">
<!--        <img src="./assets/images/new10.png" alt=""/>-->
<!--        <img :src="circleLeft" alt="" />-->
<!--        webpack test-->
        <canvas id="canvas" width="1000px" height="800px"></canvas>
    </div>
</template>

<script>
import circleLeft from '../assets/images/circle-left.svg';

export default {
    name: 'App',
    data() {
        return {
            circleLeft,
            canvas: null,
            ctx: null,
            translate: { x: 0, y: 0 },
            scale: 1,
            RAF: null,
            //当前执行时间
            nowTime: 0,
            //记录每次动画执行结束的时间
            lastTime: Date.now(),
            //我们自己定义的动画时间差值
            diffTime: 1000/60
        };
    },
    mounted() {
        this.canvas = document.getElementById('canvas');
        console.log([this.canvas]);
        this.ctx = this.canvas.getContext('2d', {
            antialias: true
        });

        this.ctx.lineJoin = 'round';
        this.ctx.globalCompositeOperation = 'source-over'; // 覆盖模式

        this.drag();
        this.scaleHandle();

        this.render();
    },
    methods: {
        draw() {
            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.width);

            this.ctx.scale(2, 2);
            this.ctx.strokeStyle = '#8a28e8';
            this.ctx.lineWidth = 1;
            this.ctx.strokeRect(0,0,80,40);
            this.ctx.strokeRect(0,0,80,40);
            this.ctx.stroke();
        },
        stopDraw() {
            cancelAnimationFrame(this.RAF);
        },
        drawRect(){
            const { x, y } = this.translate;

            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            this.ctx.translate(x, y);
            this.ctx.scale(this.scale, this.scale);

            // console.log(this.ctx);

            this.ctx.strokeStyle = '#8a28e8';
            this.ctx.lineWidth = 1;
            this.ctx.strokeRect(600,50,80,40);
            this.ctx.strokeRect(100,50,80,40);
            this.ctx.strokeRect(0,0,this.canvas.width,this.canvas.height);
            this.ctx.stroke();

            const PI = Math.PI;
            this.ctx.strokeStyle = '#d41414';
            this.ctx.beginPath();
            this.ctx.arc(100, 200, 20, 0.5 * PI, 1.5 * PI, false);
            this.ctx.arc(200, 200, 20, -0.5 * PI, 0.5 * PI, false);
            this.ctx.lineTo(100,220);
            this.ctx.lineWidth = 1;
            this.ctx.stroke();
            this.ctx.fill();

            this.ctx.closePath();

            //绘制起始点、控制点、终点
            // this.ctx.beginPath();
            // this.ctx.strokeStyle = "#2038ba";
            // this.ctx.moveTo(50,160);
            // this.ctx.lineTo(130,80);
            // this.ctx.lineTo(180,150);
            // this.ctx.stroke();

            //绘制2次贝塞尔曲线
            // this.ctx.beginPath();
            // this.ctx.strokeStyle = "red";
            // this.ctx.moveTo(50,160);
            // this.ctx.quadraticCurveTo(130,80,180,150);
            // this.ctx.stroke();
        },
        render() {
            //记录当前时间
            this.nowTime = Date.now()
            // 当前时间-上次执行时间如果大于diffTime，那么执行动画，并更新上次执行时间
            if(this.nowTime - this.lastTime > this.diffTime) {
                this.lastTime = this.nowTime
                // render();
                // console.log('this.ctx:', this.ctx);
                // this.drawRect();
            }
            this.drawRect();
            this.RAF = requestAnimationFrame(this.render);
        },
        drag() {
            const pos = {
                startX: 0,
                startY: 0,
                endX: 0,
                endY: 0
            };
            this.canvas.addEventListener('mousedown', (evt) => {
                pos.startX = evt.clientX;
                pos.startY = evt.clientY;
                const move = (e) => {
                    pos.endX = e.clientX;
                    pos.endY = e.clientY;
                    this.translate.x += pos.endX - pos.startX;
                    this.translate.y += pos.endY - pos.startY;
                    pos.startX = e.clientX;
                    pos.startY = e.clientY;
                }
                const end = (e) => {
                    pos.endX = e.clientX;
                    pos.endY = e.clientY;
                    this.translate.x += pos.endX - pos.startX;
                    this.translate.y += pos.endY - pos.startY;
                    window.removeEventListener('mousemove', move);
                    window.removeEventListener('mouseup', end);
                    this.canvas.removeEventListener('mouseout', end);
                }
                window.addEventListener('mousemove', move);
                window.addEventListener('mouseup', end);
                this.canvas.addEventListener('mouseout', end);
            });
        },
        scaleHandle() {
            this.canvas.addEventListener('mousewheel', (e) => {
                console.log(e);
                e.preventDefault();
                const { x, y } = this.translate;
                const oldScale = this.scale;
                const ox = (e.offsetX - x)/oldScale;
                const oy = (e.offsetY - y)/oldScale;
                if (e.wheelDelta < 0) {
                    this.scale = Math.round((this.scale - 0.1) * 10) / 10;
                } else {
                    this.scale = Math.round((this.scale + 0.1) * 10) / 10;
                }
                console.log(x, y, this.scale, e.offsetX, e.offsetY);

                this.translate.x = e.offsetX - this.scale * ox;
                this.translate.y = e.offsetY - this.scale * oy;
            });
        }
    }
};
</script>

<style lang="scss">
*{
    font-family: PingFang SC,serif;
    box-sizing: border-box;
}
.app {
    font-size: 0;
    width: 100%;
    height: 100%;
    min-width: 1366px;
    min-height: 768px;
    background-color: white;
    padding-top: 50px;
    padding-left: 100px;
    #canvas{
        border: 1px solid #162b97;
    }
}
</style>
